<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>政府网站无障碍工具条</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">





    <link href="elder.css" rel="stylesheet" />
    <style>
        body {
            FONT-FAMILY: "微软雅黑", SimSun, Arial, Tahoma, Helvetica, san-serif;
            font-size: 18px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        a:link, a:visited, a:hover {
            text-decoration: none;
        }

        a {
            color: #333;
        }

            a:hover {
                color: #a7793d;
            }

        .container {
            width: 1200px;
            padding-right: 35px;
            padding-left: 35px;
            margin-right: auto;
            margin-left: auto;
        }

        .jumbotron {
            padding: 50px 45px;
            margin-bottom: 30px;
            color: inherit;
            background-color: #c7c0c0;
        }

            .jumbotron h1 {
                text-align: justify;
                clear: both;
            }

            .jumbotron p {
                padding-top: 20px;
                clear: both;
            }

        .col-sm-4 {
            width: 33.33333333%;
            float: left;
            min-height: 1px;
        }

        .h3, h3 {
            font-size: 24px;
        }

        .h1, .h2, .h3, h1, h2, h3 {
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .lang {
            float: left;
            display: flex;
            flex-flow: row nowrap;
            line-height: 30px;
            margin: 0 5px;
            padding: 0 10px 0 0;
        }

        .row:after, .row:before {
            display: table;
            content: " ";
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
        }

            .row:after {
                clear: both;
            }
    </style>

</head>
<body>
    <script type="text/javascript" src="../dist/assist-entry.js"></script>
    <div class="container">
        <div class="jumbotron">

            <div class="lang">
                <img src="wza.png">
                <a href="javascript:void(0);" id='assist-open'>无障碍浏览 </a>
            </div>


            <div class="lang">
                <img src="sl.png">
                <a href="javascript:void(0);" id='shilao-open'>长者模式 </a>
            </div>
            <p>点击上方按钮进行演示</p>

            <h1>政府网站无障碍工具条 演示</h1>





        </div>
        <div class="row">
            <div class="col-sm-4">
                <h3>
                    <a href="https://gitee.com/dexters/wuzhangai">技术支持：</a><br>
                </h3>
                <p> <img alt="图片" src="http://www.50cms.com/temple/images/mid4.jpg" /> </p>
                <p>跳转到gitee下载源代码</p>
            </div>
            <div class="col-sm-4">
                <h3>Tips: </h3>
                <p>演示网站： <a href="www.50cms.com">www.50cms.com</a> </p>
                <p>可以使用浏览器F12查看本页代码</p>
            </div>
            <div class="col-sm-4">
                <h3> # 功能建议联系：</h3>
                <p>

                    QQ：53815112

                </p>
                <p> 微信：dextet.</p>
            </div>
        </div>

        <div class="row">
            <h3>
                政府网站无障碍工具条，适老化，长者模式开发中
            </h3>
            <p>
                什么是无障碍工具条？
            </p>
            <p> 网站无障碍工具条，这是一个针对于 有视障、听说障碍、读写障碍、肢体障碍，机体功能衰退的老年人群或残障人士开发的一个网站辅助js插件</p>



            <h3>
                功能
            </h3>
            <p>
                1.文本朗读 2.页面放大&缩小 3.大鼠标样式 4.十字线 5.大字幕 6.指读
            </p>

            <h3>
                演示地址
                <a href="www.50cms.com">www.50cms.com</a>
            </h3>

            <h3>
               下载地址
                <a href="https://gitee.com/dexters/wuzhangai">https://gitee.com/dexters/wuzhangai</a>
            </h3>
            <h3>
                调用方式
            </h3>

            <p>在网页合适的地方如banner处加入id为 assist-open 的标签；  </p>
            <p>########在页面 body 之间################引入插件js ../dist/assist-entry.js；  </p>
            <p>如果需要特殊处理的地方使用后面的API做对应处理；          </p>
            <p>在网页根目录上传 /src/assets/allaw.cur文件;              </p>


        </div>
    </div>
</body>
</html>
